<template>
	<view class="sign">
		<sp-sign-board ref="signBoardRef" sid="sign-board" bgColor="#ffffff" :mark-text="markText" horizontal
			@reset="reset" @firstTouchStart="firstTouchStart"></sp-sign-board>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markText: ''
			}
		},
		onLoad() {
			// 生成水印内容
			this.refreshMark()
		},
		methods: {
			refreshMark() {
				const currentDate = new Date()
				const year = currentDate.getFullYear()
				const month = String(currentDate.getMonth() + 1).padStart(2, '0')
				const day = String(currentDate.getDate()).padStart(2, '0')
				const hours = String(currentDate.getHours()).padStart(2, '0')
				const minutes = String(currentDate.getMinutes()).padStart(2, '0')
				const seconds = String(currentDate.getSeconds()).padStart(2, '0')

				this.markText = [`${year}-${month}-${day}`, `${hours}:${minutes}:${seconds}`]
			},
			firstTouchStart() {
				// 在第一次开始触碰时，更新一下时间水印，防止滞留时间太长造成时间误差（非必要）
				this.refreshMark()
				// 手动调用组件内绘制水印方法重新绘制
				this.$refs.signBoardRef.drawMark(this.markText)
			},
			reset() {
				this.refreshMark()
			}
		}
	}
</script>

<style>
	.sign {
		width: 100%;
		height: calc(100vh - 44px);
	}
</style>